<!--  -->
<template>
  <div>
    <el-tree
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      v-bind="{...config}"
    ></el-tree>
    <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <!-- <el-button @click="getCheckedKeys">通过 key 获取</el-button> -->
      <!-- <el-button @click="setCheckedNodes">通过 node 设置</el-button> -->
      <!-- <el-button @click="setCheckedKeys">通过 key 设置</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
        disabled: "disabled"
      }
    };
  },
  props: {
    config: {
      type: Object
    },
    treeData: {
      type: Array
    }
  },
  created() {
    this.setData(this.treeData);
  },
  components: {},
  methods: {
    setData(data) {
        for(var i in data){
            data[i].label = data[i].name;
            if('children' in data[i]){
                this.setData(data[i].children)
            }
        }
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1"
        },
        {
          id: 9,
          label: "三级 1-1-1"
        }
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>